<template>
    <!-- 人员管理-培训成绩 -->
    <div class="empEducation">
        <div class="top">
            <div class="search" style="align-items: center;">
                <div class="list" style="cursor: pointer" @click = "goBack">
                    <!-- <Icon type="ios-arrow-back"  style="font-size: 16px" />返回 -->
                    <el-button size="medium" type="primary" icon="el-icon-arrow-left">返回</el-button>
                </div>
                <div class="list" style="width: 300px;">
                    <Input search enter-button v-model="keyword" @on-search="onSearch"   placeholder="请输入人员姓名、工种搜索" style="width: 100%;" clearable />
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
            </div>
            <div class="download" style=" margin-right: 20px;">
                <el-button @click="download"  size="small">下载签名工具</el-button>
            </div>
        </div>
        <div class="bottom">
            <div class="table">
                <el-table :data="empList" border :height="tableHeight" :stripe='true'>
                    <el-table-column prop="empName" label="人员姓名" >
                        <template slot-scope="scope">
                            <span>{{scope.row.empName ? scope.row.empName : '—'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="idCardNo" label="证件编号">
                        <template slot-scope="scope">
                            <span>{{scope.row.idCardNo ? scope.row.idCardNo : '—'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="workTypeName" label="工种">
                        <template slot-scope="scope">
                            <span>{{scope.row.workTypeName ? scope.row.workTypeName : '—'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="trainPeriod" label="学时">
                        <template slot-scope="scope">
                            <span>{{scope.row.trainPeriod ? scope.row.trainPeriod : '—'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="totalScore" label="总分">
                        <template slot-scope="scope">
                            <span>{{scope.row.totalScore ? scope.row.totalScore : '—'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="passScore" label="及格分">
                        <template slot-scope="scope">
                            <span>{{scope.row.passScore ? scope.row.passScore : '—'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="score" label="成绩">
                        <template slot-scope="scope">
                            <span>{{scope.row.score ? scope.row.score : '—'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="state" label="是否合格">
                        <template slot-scope="scope">
                            <el-tag type="info" v-if="scope.row.passFlag == 0" size="small">不合格</el-tag>
                            <el-tag type="success" v-if="scope.row.passFlag == 1" size="small">合格</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="examNo" label="试卷编号">
                        <template slot-scope="scope">
                            <span>{{scope.row.examNo ? scope.row.examNo : '—'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="examCount" label="考试次数">
                        <template slot-scope="scope">
                            <span>{{scope.row.examCount ? scope.row.examCount : '—'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="signImgUrl" label="签名图片">
                        <template slot-scope="scope">
                            <el-image v-if="scope.row.signImgUrl && scope.row.signImgUrl" :src="scope.row.signImgUrl" style="display:block;width:45px;height:45px;" :preview-src-list="[scope.row.signImgUrl]" ></el-image>
                            <span v-else>—</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="imgUrlList" label="成绩图片" width="200px">
                        <template slot-scope="scope">
                            <template v-if="scope.row.imgUrlList && scope.row.imgUrlList.length > 0">
                                <el-image v-for="(src,index) in scope.row.imgUrlList" :src="src" :key="index" style="display:inline-block;width:45px;height:45px;" :preview-src-list="scope.row.imgUrlList" ></el-image>
                            </template>
                            <span v-else>—</span>
                        </template>
                    </el-table-column>
                    <el-table-column  label="操作" align="center" width="150px">
                        <template slot-scope="scope">
                            <el-button @click="uploadFn(scope.row.trainEmpId,1)" type="text" size="small">电子签名</el-button>
                            <el-button @click="uploadFn(scope.row.trainEmpId,2,scope.row)" type="text" size="small">成绩图片</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="empList.length>0">
                <div class="float-right">
                    <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                </div>
            </div>
        </div>
        <Modal v-model="uploadModal" title="签名" width="360px;" :mask-closable="false">
            <div style="margin:10px">是否签名成功？</div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submit" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
        <Modal v-model="imgModal" title="成绩图片" width="420px;" :mask-closable="false">
            <div>
                <div class="item img">
                    <span>成绩图片:</span>
                    <el-upload
                        :class="{hideAdd:imgFlag}"
                        :data="{module:'train_emp'}"
                        ref='uploadImg'
                        :headers="headers"
                        :file-list="imgFileList"
                        :action="$axios.defaults.baseURL+'/ms/api/emp/upload/img'"
                        list-type="picture-card"
                        accept="image/png, image/jpg, image/jpeg"
                        :before-upload="beforeImgUpload"
                        :on-success="reportlogImgSuccess"
                        name="file"
                        :limit=3
                        style="width: 260px;"
                        :on-exceed="exceedImg"
                        :on-remove="handleReportRemove">
                        <i  class="el-icon-plus"></i>
                    </el-upload>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submitImg" type="primary" size="small" plain v-preventReClick="1500">提交</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>

import {getAttendPsonList} from "@/api/api.js";
import {getEmpTrainImg} from "@/api/emp";
export default {
    data() {
        return {
            headers: {
                Authorization:localStorage.getItem('COOKIE'),
            },
            trainEmpId:'',
            imgFileList:[],
            imgFlag:false,
            traineeId:'',
            keyword:'',
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            deptId: "",
            months: "",
            empList: [],
            btnList: [],
            deptName: "",
            tableHeight:window.innerHeight - 300,
            uploadModal:false,
            imgModal:false,
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.deptName = val.name;
                this.pageNum = 1;
                this.current = 1;
                this.getTraineeList();
            }
        },
        imgFileList(val, oldVal) {
            if (val.length == 3) {
                this.imgFlag = true;
            } else {
                this.imgFlag = false;
            }
        },
    },
    methods: {
        //提交成绩图片
        submitImg(){
            let trainEmpId = this.trainEmpId;
            let imgUrlList =[];
            this.imgFileList.forEach(v=>{
                imgUrlList.push(v.url)
            })
            let formData = new FormData();
            formData.append("trainEmpId", trainEmpId);
            formData.append("imgUrlList", imgUrlList);
            getEmpTrainImg(formData).then(res => {
                if (res.code == 200) {
                    this.$Message.success("操作成功");
                    this.getTraineeList();
                    this.imgModal = false;
                } else {
                    this.$Message.warning(res.msg);
                }
            })
                .catch(error => {
                    console.log(error);
                });

        },
        beforeImgUpload(file){
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$Message.error("上传图片大小不能超过 2MB!");
            }
            return isLt2M;
        },
        reportlogImgSuccess(res,file){
            let obj = {
                url: res.data.path,
                name:file.name
            };
            this.imgFileList.push(obj) ;
        },
        exceedImg(files,fileList){
            if(this.imgFileList.length==3){
                this.$Message.warning('上传图片最多3张');
                return;
            }
        },
        handleReportRemove(res, fileList){
            for (let i = 0; i < this.imgFileList.length; i++) {
                if (res.url == this.imgFileList[i].url) {
                    this.imgFileList.splice(i, 1);
                }
            }
        },
        goBack(){
            this.$router.push({
                path: "/emp/train",
            });
        },
        download(){
            window.open(`${this.$Global.fileSite}/common/sign-tools.zip`);
        },
        uploadFn(id,type,item){
            this.trainEmpId = id;
            if(type == 1){
                if(window.location.hostname=='localhost' || window.location.hostname=='127.0.0.1'){
                    let str = `id=${id}-type=train_emp-emp=`
                    window.open(`openIE:http://127.0.0.1:5504/pages/sign.html?${str}`);
                }else{
                    let str = `id=${id}-type=train_emp-emp=`
                    window.open(`openIE:${window.location.origin}/ms/pages/sign.html?${str}`);
                }
                setTimeout( ()=>{
                    this.uploadModal = true;
                },3000)
            }else{
                this.imgFileList = [];
                this.imgModal = true;
                if( item.imgUrlList &&  item.imgUrlList.length > 0){
                    item.imgUrlList.forEach(v => {
                        this.imgFileList.push({
                            url: v,
                        });
                    });
                }
            }

        },
        submit(){
            this.uploadModal = false;
            this.getTraineeList();
        },
        cancel(type){
          if(type == 1){
              this.uploadModal = false;
          }else if(type == 2){
              this.imgModal = false;
          }
        },
        //获取培训人员列表
        getTraineeList() {
            this.traineeId = this.$route.query.trainId;
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                trainId: this.traineeId,
                keyword: this.keyword,
            };
            getAttendPsonList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.empList = res.data.detail.empList;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        onSearch(){
            this.pageNum = 1;
            this.current = 1;
            this.getTraineeList();
        },
        pageChange(index) {
            this.pageNum = index;
            this.getTraineeList();
        },
        pageSizeChange(index){
            this.pageSize = index;
            this.getTraineeList();
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.deptName = this.$store.state.porjectObject.name;
        this.getTraineeList();
        this.btnList = JSON.parse(localStorage.getItem("arr"));
    }
};
</script>


<style scoped lang="less">
// @import "./../../assets/style/emp_common.less";
@import "./../../assets/style/themeBase.less";
.empEducation{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .top {
        width: 100%;
        height: 72px;
        background: #fff;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search {
            width: auto;
            margin-left: 20px;
            padding-top: 20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding-bottom: 20px;
                margin-right: 20px;
                span {
                    width: 70px;
                }
            }
        }
        .down {
            width: auto;
            margin-right: 20px;
        }
    }
    .bottom {
        width: 100%;
        padding: 20px;
        margin-top: 10px;
        box-sizing: border-box;
        height: calc(100% - 82px);
        background: #fff;
        border-radius: 10px;
        .down {
            width: 98%;
            margin: 0 auto;
            margin-top: 20px;
        }
        .msg {
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-right: 24px;
                p {
                    margin-right: 10px;
                    font-size: 16px;
                    color: #000;
                    &:nth-child(2) {
                        color: red;
                    }
                }
            }
        }
    }
}
.form_list {
    width: 96%;
    margin: 0 auto;
    .item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        margin-bottom: 20px;
        padding-left: 16px;
        box-sizing: border-box;
        span {
            display: inline-block;
            width: 100px;
        }
        .tip {
            position: absolute;
            top:8px;
            left: 0;
            color: red;
            width: 2px;
        }
    }
}
/deep/ .upload{
    width: 98%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 30px;
    margin: 20px auto;
    span{
        width: 90px;
        font-weight: 700;
        &:last-of-type{
            height: pxToRem(50);
            line-height: pxToRem(50);
        }
    }
    .avatar {
        width: 30px;
        height: 30px;
        display: block;
        cursor: pointer;
    }
}
.item {
    width: 80%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    padding-left: 16px;
    box-sizing: border-box;
    &.img{
        /deep/.avatar-uploader{
            flex: 1;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
        }
        /deep/.el-upload--picture-card{
            width: 60px;
            height: 60px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
        }
        /deep/.avatar-uploader .el-upload:hover {
            border-color: var(--themeColor);
        }
        /deep/.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
        /deep/.el-upload--picture-card{
            line-height: 60px !important;
        }
        /deep/.avatar {
            width: 60px;
            height: 60px;
            display: block;
        }
        /deep/.el-upload-list--picture-card .el-upload-list__item {
            width: 60px !important;
            height: 60px !important;
            margin-right: 25px;
            margin-bottom: 10px;
            &:nth-of-type(3){
                margin-right: 0px;
            }
        }
        /deep/.el-upload-list__item {
            transition: none !important;
        }
    }
    .tip {
        position: absolute;
        color: red;
        font-size: 16px;
        top:8px;
        left: 0;
    }
    span {
        display: inline-block;
        width: 80px;
    }
}
.hideAdd {
    /deep/ .el-upload--picture-card {
        display: none;
    }
}
.download{
    /deep/.el-button:hover {
        color: var(--themeColor);
        border-color: var(--themeColor1);
        background-color: var(--themeColor2);
    }
}
</style>
